<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <Hello></Hello>
    <!--使用相关组件，（写组件标签）-->
    <Car></Car>
    <Student></Student>
</div><hr>
<div id="app2">
    <Hello></Hello>
</div>
</body>
<!--

        Vue中使用组件的三大步骤:
            一、定义组件(创建组件)
            二、注册组件
            三、使用组件(写组件标签)
        一、如何定义一个组件?
            使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别:
                区别如下:
                    1.e1不要写，为什么?- 最终所有的组件都要经过一个vm的管理，由vm中的e1决定服务哪个容器。
                    2.data必须写成函数，为什么?-- 避免组件被复用时，数据存在引用关系。
                        备注:使用template可以配置组件结构。注意:template只能有一个根元素。
        二、如何注册组件?
            1.局部注册:靠new Vue的时候传入components选项
            2.全局注册:靠Vue.component('组件名'组件)
        三、编写组件标签:
            <Car></Car>
            <Student></Student>
            <Hello></Hello>
-->

<script>
    //全局组件注册，创建一个组件，并绑定在Vue上，所有的Vue实例都可进行使用
    const hello = Vue.component('Hello', {
        template: `<div><h1>这是全局组件都可以使用</h1></div>`
    });


    //这个是自定义一个Car组件（vc实例），但是并没有和vue实例关联
    let Car = Vue.extend({
        template: `<div><h1>{{carName}}</h1><h2>{{price}}</h2></div>`,
        data() {
            return {
                carName: "兰博基尼",
                price: 1000000,
            }
        }
    });

    //这个是自定义一个Student组件（vc实例），但是并没有和vue实例关联
    let Student = Vue.extend({
        template: `<div><h2>{{studentName}}</h2><h2>{{age}}</h2></div>`,
        data() {
            return {
                studentName: "张三",
                age: 18
            }
        }
    });

    new Vue({
        el: '#app',
        // 注册组件到vue实例中
        components: {
        // 映射组件
            Car,
            Student,
            hello
        }
    });

    new Vue({
        el: '#app2',
        // 注册组件到vue实例中
        components: {
            Hello: hello
        }
    })

</script>
</html>